<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{padding:0;margin:0;}
        body{
            background-color:#999;
        }
        p {
            width: 1000px;
            height: 100px;
            margin:100px auto;
            text-align:center;
            font-size:60px;
            line-height: 100px;
            color: rgba(0, 0, 0, 0);
            font-weight: bold;
            background:#000 -webkit-linear-gradient(-30deg, rgba(255, 255, 255, 0) 92px,
            rgba(255, 255, 255, 1) 109px,
            rgba(255, 255, 255, 1) 123px,
            rgba(255, 255, 255, 0) 141px);
            background:#000 -moz-linear-gradient(-30deg, rgba(255, 255, 255, 0) 92px,
            rgba(255, 255, 255, 1) 109px,
            rgba(255, 255, 255, 1) 123px,
            rgba(255, 255, 255, 0) 141px);
            background:#000 linear-gradient(-30deg, rgba(255, 255, 255, 0) 92px,
            rgba(255, 255, 255, 1) 109px,
            rgba(255, 255, 255, 1) 123px,
            rgba(255, 255, 255, 0) 141px) -1570px 0px;
            background-clip:text;

        }
    </style>
</head>
<body>
<p>Xin Zhuo Yue 新卓越</p>
<script>
    var oP=document.getElementsByTagName("p")[0];
    var timer=null;
    var n=-1570;
    function doMove(){
        clearInterval(timer);
        timer=setInterval(function(){
            n+=10;
            if(n>=(-1158)){
                n=-1570;
                clearInterval(timer);
            }
            oP.style.backgroundPosition=n+"px 0px";
        },200)
    }
    doMove();
    setInterval(function(){
        doMove();
    },4500)

</script>
</body>
</html>
